<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
  .bgc{
    background-color: red;
   }
   .red{
       background-color: red;
   }
    .green{
        background-color: green;
    }
</style>

<body>
<div id="app">

    <input type="button" value="红色" @click="bgc='red'">
    <input type="button" value="绿色" @click="bgc='green'">
    <br>

    <!--v-bind简写（:） html所需的属性需要动态取值的时候-->

    <div style="width: 100px;height: 100px;" v-bind:class="bgc" >
        {{bgc}}
    </div>

</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>

     var dataObj= {
         name: "刘德华",
         num: 0,
         bgc:"red"

     }

     var vue = new Vue({
     el:"#app",
     data:dataObj

     });

</script>
</body>
</html>